<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import SaveService from "./saveService.vue";
import {router} from "../../router/index.js";

const currentPage=ref(1)
const pageSize=ref(2)
const total=ref(0)
const visible=ref(false)
const handleSearch = ()=>{
  getServiceList()
}
const handleCurrentChange = (val=>{
  currentPage.value=val
  getServiceList()
})
const handleSizeChange = (val)=>{
  pageSize.value=val
  getServiceList()
}
const search = ref({})
const tableData=ref([])
const handleDelete =(row)=>{
  ElMessageBox.confirm(
      '<strong>确定要删除这条商品数据吗？</strong><br><span style="color: red;">删除后无法恢复</span><br><span style="color: gray;">请问还要继续吗？</span>',
      'Warning',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
  )
      .then(() => {
        axios.delete(`/carcenter-service-order/services/del/${row.id}`).then(resp=>{
          ElMessage.success(resp.data)
          getServiceList()
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: 'Delete canceled',
        })
      })

}
const handleAdd =()=>{
  router.push({name:'SaveService'})
}

const getServiceList = ()=>{
  axios.post(`/carcenter-service-order/services/getServiceList/${currentPage.value}/${pageSize.value}`,search.value).then(resp=>{
    tableData.value=resp.data.data.data
    total.value=resp.data.data.total
  })
}
const handleRelease =(row)=>{
  axios.put(`/carcenter-service-order/services/release/${row.id}`).then(resp=>{
    ElMessage.success(resp.data)
    getServiceList();
  })
}
const handleEdit =(row)=>{
  router.push({name:'EditService',query:{id:row.id}})
}
onMounted(()=>{
  getServiceList()
})
</script>

<template>
  <div class="service-management">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="服务名称">
        <el-input v-model="search.serviceName" placeholder="请输入服务项目名称"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="search.status" placeholder="不限" style="width: 100px">
          <el-option label="启用" value="enabled"></el-option>
          <el-option label="禁用" value="disabled"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="danger" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-button type="danger" @click="handleAdd">新增</el-button>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="serviceName" label="服务名称"></el-table-column>
      <el-table-column prop="unitName" label="单位"></el-table-column>
      <el-table-column prop="retailPrice" label="零售价"></el-table-column>
      <el-table-column prop="standardPrice" label="标准价"></el-table-column>
      <el-table-column prop="costPrice" label="成本价"></el-table-column>
      <el-table-column prop="status" label="服务状态">
        <template #default="scope">
          <el-tag v-if="scope.row.status===1" type="success">已发布</el-tag>
          <el-tag v-else type="danger">未发布</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="serviceDescription" label="服务介绍"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button v-if="scope.row.status !== 1" size="mini" type="text" @click="handleRelease(scope.row)">发布</el-button>
          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)" style="color: red">删除</el-button>
        </template>
      </el-table-column>
      <template #empty>
        <div style="text-align: center; padding: 20px;">
          <i class="iconfont icon-zanwufuwu" style="font-size: 60px"></i>
          <p>暂无服务</p>
        </div>
      </template>
    </el-table>

    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[4, 10, 20, 40]"
        :size="'small'"
        :disabled="false"
        :background="false"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        style="text-align: center; margin-top: 20px;"
    ></el-pagination>
  </div>
</template>

<style scoped>
.service-management {
  padding: 20px;
}

.demo-form-inline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-form-item {
  margin-bottom: 10px;
}

.el-pagination {
  margin-top: 20px;
  text-align: center;
}
</style>